<template>
  <vant-form ref="form" :validate-first="true" class="page-p-l page-p-r" input-align="right">
    <app-picker-field
      label="货物类型"
      v-model="form.cargoKind"
      :columns="cargoType"
      :rules="[{ required:true }]"
      input-align="right"
      :formatLabel="formatLabel"
    ></app-picker-field>

    <vant-field
      label="货物名称"
      v-model="form.cargoName"
      placeholder="请输入"
      input-align="right"
      :rules="[{ required:true }]"
    />
    <app-input-number
      label="货物重量"
      v-model="form.cargoWeight"
      placeholder="请输入"
      input-align="right"
      :rules="[{ required:true }]"
    >
      <span slot="extra">吨</span>
    </app-input-number>

    <app-input-number
      label="货物长度"
      v-model="form.cargoLength"
      placeholder="请输入"
      type="number"
      input-align="right"
      :rules="[{ required:true }]"
    >
      <span slot="extra">米</span>
    </app-input-number>
    <app-input-number
      label="货物宽度"
      v-model="form.cargoWidth"
      type="number"
      placeholder="请输入"
      input-align="right"
      :rules="[{ required:true }]"
    >
      <span slot="extra">米</span>
    </app-input-number>
    <app-input-number
      label="货物高度"
      v-model="form.cargoHeight"
      placeholder="请输入"
      input-align="right"
      :rules="[{ required:true }]"
    >
      <span slot="extra">米</span>
    </app-input-number>
    <div></div>
  </vant-form>
</template>

<script>
import { cargoType, saveGovCargo } from '@apis/apply'
import mixin from './mixin'
export default {
  name: 'ApplyCargo',
  mixins: [mixin],
  data() {
    return {
      form: this.curForm,
      cargoType: []
    }
  },
  created() {
    this.setFormVal();
    this.saveGovCargo()
    this.getCargoType()
  },
  mounted() {

  },
  methods: {
    setFormVal(data = {}) {
      ['cargoName', 'cargoWeight', 'cargoLength', 'cargoWidth', 'cargoHeight'].forEach(key => {
        this.$set(this.form, key, data[key] ? data[key] : '')
      });
       ['cargoKind'].forEach(key => {
        this.$set(this.form, key, data[key] ? data[key] : [])
      });
    },
    saveGovCargo() {
      saveGovCargo().then(res => {
        const { data = {} } = res || {};
        this.setFormVal(data);
      })
    },
    formatLabel(v) {
      return v.split('/')[1]
    },
    getCargoType() {
      cargoType().then(res => {
        const { data = [] } = res || {}
        this.cargoType = data
      })
    },
    submit() {
      return Promise.resolve(this.form);
    }
  }
}
</script>

<style lang="less" scoped>
</style>